<template>
    <div class="hotel_filter_item">
        <div class="hotel_filter_item_title">{{ optionList.title }}</div>
        <div class="hotel_filter_item_content">
            <el-dropdown placement="bottom">
                <span class="el-dropdown-link">
                    {{form[optionList.field].length === 0 ? '不限'
                    : form[optionList.field].length === 1
                    ? filterName(form[optionList.field][0])
                    :'已选' + form[optionList.field].length + '项' }}
                    <i
                        class="el-icon-arrow-down el-icon--right"
                    ></i>
                </span>

                <el-dropdown-menu slot="dropdown" style="max-height: 300px; overflow: auto;">
                    <el-dropdown-item
                        @click.native="handleItem($event,item.id, index)"
                        v-for="(item, index) in optionList.list"
                        :key="index"
                    >
                        <i ref="option_icon" class="option_icon iconfont icon-circle"></i>
                        <span class="option_txt">{{ item.name }}</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
export default {
    props: ["optionList", "form", "isCancel"],
    data() {
        return {

        };
    },

    methods: {
        filterName(id) {
            let index = this.optionList.list.findIndex((v) => v.id === id);
            return this.optionList.list[index].name;
        },
        handleItem(e, id, i) {
            let index = this.form[this.optionList.field].findIndex(
                (v) => v === id
            );

            if (index === -1) {
                this.isCancel = false;
                $(this.$refs.option_icon[i]).removeClass(
                    "iconfont icon-circle"
                );
                $(this.$refs.option_icon[i]).addClass("el-icon-circle-check");
            } else {
                $(this.$refs.option_icon[i]).removeClass(
                    "el-icon-circle-check"
                );
                $(this.$refs.option_icon[i]).addClass("iconfont icon-circle");
            }

            this.$emit("optionChange", this.optionList.field, id);
        },
    },
    watch: {
        isCancel(newVal) {
            if (newVal) {
                $(this.$refs.option_icon).removeClass("el-icon-circle-check");
                $(this.$refs.option_icon).addClass("iconfont icon-circle");
            }
        },
    },
};
</script>

<style lang="less" scoped>
.hotel_filter_item {
    flex: 1;
    border-right: 1px solid #ccc;
    font-size: 14px;
    color: #666;
    padding: 5px 20px;
    &:last-child {
        border: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hotel_filter_item_title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 3px;
    }
    .hotel_filter_item_content {
        width: 100%;
        height: 30px;
        line-height: 30px;
        .el-dropdown {
            width: 100%;
            .el-dropdown-link {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 12px;
                cursor: pointer;
            }
        }
    }
}

.option_icon {
    font-size: 16px;
}
.option_txt {
    display: inline-block;
    margin-left: 10px;
    min-width: 80px;
}
</style>
